<template>
  <div class="top-container">
    <div class="top-left">
        <span class="top-left-span" @click="goHome">首页</span>
    </div>
    <div class="top-center">
        <div class="top-center-title">智慧旅游可视化大数据平台</div>
    </div>
    <div class="top-right">
        <span class="top-right-span1">统计报告</span>
        <span class="top-right-span2">当前时间:{{currentTime}}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { useRouter } from "vue-router"
const router = useRouter();

//当前时间
let currentTime = ref('2023年9月18日 14:32:59');
//定时器标志
let timer = ref(0);

//生命周期
onMounted(()=>{
    getTime();
})
onBeforeUnmount(()=>{
    //清除定时器
    clearInterval(timer.value);
})

const getTime = () => {
    timer.value = setInterval(()=>{
        currentTime.value = getNowTime();
    },1000)
}

//点击首页进行路由跳转
const goHome = () => {
    router.push('/home');
}

//封装获取当前时间的功能函数
function getNowTime () {
    let date = new Date();
    //年 getFullYear():四位数字返回年份
    let year = date.getFullYear();
    //月 getMonth():0-11
    let month = date.getMonth() + 1;
    //日 getDate():1-31
    let day = date.getDate();
    //时 getHours():0-23
    let hour = date.getHours();
    //分 getMinutes():0-59
    let minute = date.getMinutes();
    //秒 getSeconds():0-59
    let second = date.getSeconds();
    //返回时间
    let time = year + '年' + addZero(month) + '月' + addZero(day) + '日 ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);
    return time;
}
//补零函数
function addZero(value){
    return value < 10 ? ('0' + value) : value;
}

</script>
<script lang="ts">
export default {
    name:"Top"
}
</script>

<style scoped>
.top-container{
    width:100%;
    height:40px;
    display: flex;
}
/* 左部分 */
.top-left{
    flex:1;
    background:url("@/assets/images_screen/dataScreen-header-left-bg.png") no-repeat;
    background-size: cover;
}
.top-left .top-left-span{
    width:150px;
    height:40px;
    float: right;
    background: url("@/assets/images_screen/dataScreen-header-btn-bg-l.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color:#29fcff;
    cursor: pointer;
}
/* 中间部分 */
.top-center{
    flex:2;
}
.top-center .top-center-title{
    width:100%;
    height: 74px;
    background:url("@/assets/images_screen/dataScreen-header-center-bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 74px;
    color:#29fcff;
    font-size:30px;
}
/* 右边部分 */
.top-right{
    flex:1;
    background:url("@/assets/images_screen/dataScreen-header-left-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-right .top-right-span1{
    width: 150px;
    height: 40px;
    background:url("@/assets/images_screen/dataScreen-header-btn-bg-r.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color:#29fcff;
}
.top-right .top-right-span2{
    color:#29fcff;
    font-size: 16px;
    margin-right:10px;
}
</style>